<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-26 14:58:40
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 16:05:34
 * @FilePath: \bulletin-board\src\views\netSource\components\bgContent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :style="bgColorStyle" class="content">
    <div class="content-header">
      <div :style="{ '--bgColor': bgColor }" class="content-header-text">
        vCPU总量
      </div>
    </div>
    <div class="content-center">
      <span>
        6666
        <span>核</span>
      </span>
    </div>
    <div class="line" />
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: () => '#15C0E6'
    },
    bgColorStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 360px;
  height: 220px;
  background: linear-gradient(
    180deg,
    rgba(222, 246, 251, 0.6) 0%,
    rgba(222, 246, 251, 0) 100%
  );
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  .content-header {
    overflow: hidden;
    .content-header-text {
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #2b4054;
      margin: 23px 0 23px 20px;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        width: 5px;
        height: 19px;
        top: 50%;
        background-color: var(--bgColor);
        transform: translateY(-50%);
        left: -20px;
      }
    }
  }

  .content-center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    span {
      &:nth-child(1) {
        font-size: 30px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #2b4054;
        span {
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #2b4054;
        }
      }
    }
  }
  .line {
    width: 320px;
    height: 1px;
    background: #dbeaff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin: 0 auto;
  }
}
</style>
